<script>
import LanguageDialog from "/src/components/common/LanguageDialog.vue";
import shop from "/src/js/shop"

export default {
  components: {LanguageDialog},
  data() {
    return {
      // 当前页面路由
      currentRoute: "",
      // 是否初始化完成
      isInitFinally: true,
      // 等待时文字
      loadingText: '正在初始化',
      socket: null,
      // 是否有正在连接的websocket
      isHasConnectWebSocket: false,
      socketUUID: ""
    }
  },
  async created() {
    this.$kt.event.on("into:request", (text) => {
      this.loadingText = text;
    });

    // 获取当前时间，并存入缓存
    let now = new Date().getTime();

    // 如果小于5分钟，不重新初始化
    let lastTime = this.$kt.storage.get("intoTime");
    if (now - lastTime < 5 * 60 * 1000) {
      return;
    }

    this.$kt.storage.set("intoTime", now);

    this.isInitFinally = false;
    // 初始化
    await this.init();
    this.isInitFinally = true;

  },
  mounted() {
    // this.$kt.websocket.start();
    // this.$kt.event.on("websocket:message", (data)=>{
    //   console.log(data);
    // });
    setTimeout(() => {
      this.currentRoute = this.$route.path;
    }, 1000);
  },
  methods: {
    /**
     * 初始化
     */
    async init() {
      let emitKey = "into:request";
      return new Promise((resolve) => {
        this.$kt.global.dataChange.checkDataChange("clientInit").then(async (res) => {
          if (res.isChange) {

            this.$kt.event.emit(emitKey, "Loading...");
            // this.$kt.event.emit(emitKey, "正在获取所有支持的语言");
            await this.$kt.i18n.loadingLocalized();
            await this.$kt.i18n.loadLanguage("appFront", "zh_CN");
            await this.$kt.i18n.loadingSupportLanguage();
            

            await shop.requestParamI18nAll()

            await this.$kt.i18n.loadLanguage("appFront");
            // this.$kt.event.emit(emitKey, "正在加载中");

            await this.$kt.global.dataChange.setDataChange("clientInit", res.uuid);
            resolve();
          }
          resolve();
        });
      });
    },
  }
}

</script>

<template>

  <div v-if="!isInitFinally"
       class="app-loading">
    <div class="back">
      <div v-for="item in 100" class="back-logo-box">
        <img class="back-logo" src="/logo.png"/>
      </div>
    </div>
    <div class="app-loading-content">
      <div class="app-loading-icon-box">
        <kt-icon icon="ant-icon-loading-outlined"
                 size="50px"
                 color="#fff"
        ></kt-icon>
      </div>
      <div>{{ loadingText }}</div>
    </div>
  </div>

  <router-view v-else></router-view>
</template>

<style lang="scss" scoped>
.language-box {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  cursor: pointer;

  .language-icon {
    width: 20px;
    height: 20px;
  }
}

.language-box:hover {
  transform: scale(1.1);
}

.language-box:active {
  transform: scale(1);
}


.app-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;

  .app-loading-icon-box {
    animation: rotate 1s linear infinite;
  }

  .app-loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #fff;
    text-align: center;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.back-logo-box {
  position: relative;
  width: 150px;
  height: 150px;
  display: inline-block;
  opacity: .2;

  .back-logo {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

}

</style>
